<script setup>
import {ref} from "vue";

const count = ref(0)

const name = ref('Vue.js')

// 事件响应的方法函数
function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    console.log(event)
    alert(event.target.tagName)
  }
}
// event 传递的当前点击的事件对象
function say(message, event) {
  alert(message)
  console.log(event)
}

//阻止后的执行函数
function onSubmit(){
  // 取消默认的提交方式后的处理逻辑
}

function onSubmit1(event){
  event.preventDefault()
  // 处理逻辑
}
// 演示按键的触发
function enterEvent(count){
  alert(count)
  // 如果不传递 获取不到事件对象
  // console.log(event)
}
</script>

<template>
  <!--  使用内联事件处理器 基本不用-->
  <button @click="count++">Add 1</button>
  <p>Count is: {{ count }}</p>

  <!--  使用方法事件处理器-->
  <!-- `greet` 是上面定义过的方法名 -->
  <button @click="greet">Greet</button>

  <button @click="say(name, $event)">Say hello</button>


  <!-- 提交事件将不再重新加载页面 -->
  <form @submit.prevent="onSubmit"></form>
  <form @submit="onSubmit1($event)"></form>

<!--  使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。-->
  <div @click.self.prevent="doThat">...</div>

<!--  使用按键事件绑定-->
  <input @keyup.enter="enterEvent(1111)" />


</template>


<style scoped>

</style>
